<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>导航菜单下划线跟随鼠标</title>
		<style type="text/css">
			body {
  font-family: sans-serif;
  background-color: #fff
}
ul {
  display: flex;
  list-style: none;
  text-transform: uppercase;
  width: 100%;
  box-sizing: border-box;
}
li {
  flex: 1 1;
}
li:last-child::after {
  content: "";
  width: 100%;
  height: 3px;
  background-color: transparent;
  display: block;
  transition: .3s ease;
  position: relative;
  left: 0%;
}
li:nth-child(1).current ~ li:last-child::after {
  left: -500%;
  background-color: #360033;
}
li:nth-child(2).current ~ li:last-child::after {
  left: -400%;
  background-color: #301441;
}
li:nth-child(3).current ~ li:last-child::after {
  left: -300%;
  background-color: #263357;
}
li:nth-child(4).current ~ li:last-child::after {
  left: -200%;
  background-color: #1b546f;
}
li:nth-child(5).current ~ li:last-child::after {
  left: -100%;
  background-color: #117385;
}
li:nth-child(6).current:last-child::after {
  left: 0;
  background-color: #0b8793;
}
li:nth-child(1):hover ~ li:last-child::after {
  left: -500%;
  background-color: #360033;
}
li:nth-child(2):hover ~ li:last-child::after {
  left: -400%;
  background-color: #301441;
}
li:nth-child(3):hover ~ li:last-child::after {
  left: -300%;
  background-color: #263357;
}
li:nth-child(4):hover ~ li:last-child::after {
  left: -200%;
  background-color: #1b546f;
}
li:nth-child(5):hover ~ li:last-child::after {
  left: -100%;
  background-color: #117385;
}
li:nth-child(6):last-child:last-child:hover::after {
  left: 0;
  background-color: #0b8793 !important;
}
li:nth-child(6):hover::after {
  left: 0%;
  background-color: #0b8793;
}
li:nth-child(1) a {
  color: #360033;
}
li:nth-child(2) a {
  color: #301441;
}
li:nth-child(3) a {
  color: #263357;
}
li:nth-child(4) a {
  color: #1b546f;
}
li:nth-child(5) a {
  color: #117385;
}
li:nth-child(6) a {
  color: #0b8793;
}
a {
  padding: 1rem;
  display: block;
  text-align: center;
  text-decoration: none;
  background-color: #fff;
  color: #666;
}

		</style>
	</head>
	<body>
		
		<ul>
  <li><a href="">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Projects</a></li>
  <li class="current"><a href="">Events</a></li>
  <li><a href="">Services</a></li>
  <li><a href="">Contact us</a></li>
</ul>
	</body>
</html>
